/*
  学习目标：useEffect-卸载前
  语法： useEffect(() => {   return 卸载前会自动执行的回调函数 }, [])
  
*/
import React, { useEffect, useState } from 'react';

export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child />}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  // 1. 挂载后, 监听window的resize事件

  const resizeFn = () => {
    console.log('窗口改变了');
  };
  useEffect(() => {
    window.addEventListener('resize', resizeFn);

    return () => {
      window.removeEventListener('resize', resizeFn);
    };
  }, []);

  // 2. 卸载前, 取消监听的resize事件

  return <div>我是子组件</div>;
}
